<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top:0;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            position: absolute;
            left: 200px;
            top:200px;
        }
    </style>
    <script>
        window.onload=function () {
            //div跟随鼠标移动
            //1.当鼠标在对象上按下时，开始拖拽onmousedown
            //2.当鼠标移动时被拖拽的对象跟着鼠标移动 onmousemove
            //3.当鼠标离开时 被拖拽的对象固定住 onmouseup
            var box1=document.getElementById("box1");
            var box2=document.getElementById("box2");
            var img1=document.getElementById("img1");
            drag(box1);
            drag(box2);
            drag(img1);
           function drag(obj){
               obj.onmousedown=function (event) {
                   //设置box1捕获所有鼠标按下的事件
                   // if (box1.setCapture){
                   //     box1.setCapture();
                   // }
                   ( obj.setCapture && obj.setCapture())||(obj.setPointerCapture && obj.setPointerCapture(1));
                   //只能IE使用 chrome不能调用，会报错

                   //div的偏移量 鼠标.clientX-元素.offsetLeft
                   //div的偏移量 鼠标.clientY-元素.offsetTop
                   event=event||window.event;
                   var ol=event.clientX-obj.offsetLeft;
                   var ot=event.clientY-obj.offsetTop;

                   document.onmousemove=function(event){
                       event=event||window.event;
                       var x=event.clientX-ol;
                       var y=event.clientY-ot;
                       obj.style.left=x+"px";
                       obj.style.top=y+"px";
                   };
                   document.onmouseup=function () {
                       document.onmousemove=null;//当鼠标离开的时候 鼠标移动事件取消
                       document.onmouseup=null;//只执行一次
                       //取消捕获
                       ( obj.releaseCapture && obj.releaseCapture())||(obj.releasePointerCapture && obj.releasePointerCapture(1));
                   };
                   //当我们拖拽一个网页的内容时，浏览器会默认去搜索引擎中搜索的内容，此时会导致拖拽功能异常,这是浏览器的默认行为
                   //如果不希望发生这个行为,取消默认行为用return false  但是IE8不兼容
                   return false;
               };
           }
        };
    </script>
</head>
<body>
我是一段文字
<div id="box1"></div>
<div id="box2"></div>
<img src="../imagconman/荷花.png" alt="" id="img1" style="position: absolute">
</body>
</html>